<script setup>

import {Clock, View} from "@element-plus/icons-vue";
</script>

<template>
  <div class="news-item">
    <div class="l-info">
      <a href="#"
         class="title ellipsis2">世界500强中国五矿集团旗下新田岭钨业携手远大方略一期《精益管理》咨询项目总结暨二期启动</a>
      <div class="flex flex-item-center mb-20">
        <div class="flex flex-item-center mr-20">
          <el-icon class="mr-8">
            <Clock/>
          </el-icon>
          <span class="info-color fs-14">2021-07-01</span>
        </div>
        <div class="flex flex-item-center ">
          <el-icon class="mr-8">
            <View/>
          </el-icon>
          <span class="info-color fs-14">300</span>
        </div>
      </div>
      <div class="desc ellipsis3">
        在当今竞争激烈的市场环境下，精益管理已经成为企业实现持续发展的关键。企业有效应用精益管理可以提高生产效率、降低成本和提高企业的响应速度和灵活性，帮助企业在激烈的市场竞争中取得优势，实现可持续发展。
      </div>
      <div class="btn">
        <a href="#" class=" red-bg-btn">了解更多</a>
      </div>
    </div>
    <a href="#" class="r-img">
      <div class="img">
        <img class="right-img" src="https://www.chinaydfl.com/upfile/image/20240627/1719451887_918509.jpg">
      </div>
    </a>
  </div>
</template>

<style scoped lang="scss">
.news-item {
  display: flex;
  padding: 50px 0;
  border-bottom: 1px solid #e6e6e6;

  .l-info {
    width: calc(100% - 454px);
    padding-right: 50px;

    .title {
      font-size: 24px;
      color: #313131;
      line-height: 1.25;
      margin-bottom: 20px;
      display: block;
    }


    .desc {
      font-size: 14px;
      color: #797979;
      line-height: 1.71;
      margin-bottom: 42px;
    }

    .red-bg-btn {
      display: inline-block;
      height: 38px;
      line-height: 38px;
      padding: 0 32px;
      background-color: #CA0006;
      color: #ffffff;
      font-size: 14px;
      border-radius: 2px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      -o-border-radius: 2px;
      margin: 0 auto;
      transition: all .5s ease;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
      -o-transition: all .5s ease;
    }
  }

  .r-img {
    width: 454px;
    display: block;
    .img{
      position: relative;
      padding-top: calc(290 / 454* 100%);
      overflow: hidden;
      img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.news-item:hover .title{
  color: #CA0006;
}

.news-item:hover .right-img{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
}

</style>
